<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="24">
				<el-card shadow="never">
					<el-tabs tab-position="top">
						<el-tab-pane label="个人信息">
							<el-form ref="form" :rules="rules" :model="form" label-width="80px" style="width: 460px;margin-top:20px;">
								<el-form-item label="头像" prop="avatar">
									<sc-upload-multiple ref="avatar" v-model="form.avatar" title="选择头像"></sc-upload-multiple>
								</el-form-item>
								<el-form-item label="登录账号" prop="account">
									<el-input v-model="form.account" disabled placeholder="用于登录系统" clearable></el-input>
								</el-form-item>
								<el-form-item label="姓名" prop="realname">
									<el-input v-model="form.realname" placeholder="请输入完整的真实姓名" clearable></el-input>
								</el-form-item>
								<el-form-item label="昵称" prop="nickname">
									<el-input v-model="form.nickname" placeholder="请输入昵称" clearable></el-input>
								</el-form-item>
								<el-form-item label="备注" prop="remark">
									<el-input v-model="form.remark" placeholder="请输入备注" clearable></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submit">保存</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<el-tab-pane label="修改密码" name="second">
							<el-form ref="passwordForm" :model="password" label-width="80px" style="width: 460px;margin-top:20px;"
									 :rules="secondRules">
								<el-form-item label="旧密码" prop="oldPassword">
									<el-input type="password" v-model="password.oldPassword" clearable
											  show-password  ></el-input>
								</el-form-item>
								<el-form-item label="新密码" prop="newPassword">
									<el-input type="password" v-model="password.newPassword" clearable
											  show-password ></el-input>
								</el-form-item>
								<el-form-item label="确认密码" prop="newPassword2">
									<el-input type="password" v-model="password.newPassword2" clearable
											  show-password ></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitPassword">保存</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import colorTool from '@/utils/color'

	export default {
		name: 'userCenter',
		data() {
			return {
				form: {
					id:0,
					account: "",
					avatar: "",
					nickname: "",
					phone: "",
					realname: "",
					remark: "",
					roleIdList: [],
					status: 1
				},
				password: {
					oldPassword: '',
					newPassword: '',
					newPassword2: '',
				},
				rules: {

				},
				secondRules: {
					newPassword: [
						{required: true, message: '请输入新密码'}
					],
					newPassword2: [
						{required: true, message: '请输入确认密码'},
						{ validator: (rule,value,callback) => {
								if (value === '') {
									return callback(new Error('请输入确认密码'))
								} else if (value !== this.password.newPassword) {
									return callback(new Error('二次密码不一致'))
								} else {
									return callback()
								}
							}}
					],
					oldPassword: [
						{required: true, message: '请输入旧密码'}
					],
				},
				colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
				config: {
					lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
					theme: this.$TOOL.data.get('APP_THEME') || 'default',
					colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF'
				}
			}
		},
		watch:{
			'config.theme'(val){
				document.body.setAttribute('data-theme', val)
				this.$TOOL.data.set("APP_THEME", val);
			},
			'config.lang'(val){
				this.$i18n.locale = val
				this.$TOOL.data.set("APP_LANG", val);
			},
			'config.colorPrimary'(val){
				document.documentElement.style.setProperty('--el-color-primary', val);
				for (let i = 1; i <= 9; i++) {
					document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
				}
				document.documentElement.style.setProperty(`--el-color-primary-darken-1`, colorTool.darken(val,0.1));
				this.$TOOL.data.set("APP_COLOR", val);
			}
		},
		//路由跳转进来 判断from是否有特殊标识做特殊处理
		beforeRouteEnter (to, from, next){
			next((vm)=>{
				if(from.is){
					//删除特殊标识，防止标签刷新重复执行
					delete from.is
					//执行特殊方法
					vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
						type: 'success',
						center: true
					}).then(() => {}).catch(() => {})
				}
			})
		},
		mounted() {
			this.getMyInfo()
		},
		methods: {
			async getMyInfo() {
				let res = await this.$API.gdshop.admin.person();
				if (res.code === 0) {
					this.form = res.data
				}
			},
			async submit() {
				let submitData = {};
				Object.assign(submitData, this.form);
				let res = await this.$API.gdshop.admin.userUpdate(submitData);
				if(res.code === 0){
					this.$message.success("操作成功")
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
			async submitPassword() {
				let submitData = {};
				Object.assign(submitData, this.password);
				let res = await this.$API.gdshop.admin.changePass(submitData);
				if(res.code === 0){
					this.$message.success("操作成功")
					this.$refs.passwordForm.resetFields();
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			}
		}
	}
</script>

<style scoped>
	.el-card {margin-bottom:15px;}
	.activity-item {font-size: 13px;color: #999;display: flex;align-items: center;}
	.activity-item label {color: #333;margin-right:10px;}
	.activity-item .el-avatar {margin-right:10px;}
	.activity-item .el-tag {margin-right:10px;}

	[data-theme='dark'] .user-info-bottom {border-color: var(--el-border-color-base);}
	[data-theme='dark'] .activity-item label {color: #999;}
</style>
